<template>
  <div class="preview-page">
    <div class="preview-toolbar">
      <a-space>
        <a-button @click="$emit('update:visible', false)">
          <template #icon><ArrowLeftOutlined /></template>
          返回编辑
        </a-button>
        <a-button-group>
          <a-button 
            :type="deviceMode === 'desktop' ? 'primary' : 'default'"
            @click="deviceMode = 'desktop'"
          >
            <template #icon><DesktopOutlined /></template>
          </a-button>
          <a-button 
            :type="deviceMode === 'tablet' ? 'primary' : 'default'"
            @click="deviceMode = 'tablet'"
          >
            <template #icon><TabletOutlined /></template>
          </a-button>
          <a-button 
            :type="deviceMode === 'mobile' ? 'primary' : 'default'"
            @click="deviceMode = 'mobile'"
          >
            <template #icon><MobileOutlined /></template>
          </a-button>
        </a-button-group>
      </a-space>
    </div>

    <div class="preview-content">
      <div 
        class="preview-container"
        :style="{ width: containerWidth }"
      >
        <FormProvider :form="form">
          <SchemaField :schema="formSchema" />
        </FormProvider>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import { Input, InputNumber, Select, FormItem, Switch, FormGrid } from '@formily/antdv-x3';
import { ArrowLeftOutlined, DesktopOutlined, TabletOutlined, MobileOutlined } from '@ant-design/icons-vue';
import { useEditorStore } from '@/stores/editor';

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
}>();

const editorStore = useEditorStore();
const deviceMode = ref('desktop');
const form = ref(createForm());

const { SchemaField } = createSchemaField({
  components: {
    Input,
    InputNumber,
    Select,
    FormItem,
    Switch,
    FormGrid,
  },
});

const containerWidth = computed(() => {
  switch(deviceMode.value) {
    case 'mobile': return '375px';
    case 'tablet': return '768px';
    case 'desktop': return '100%';
    default: return '100%';
  }
});

const formSchema = computed(() => {
  const components = editorStore.canvasComponents;
  return {
    type: 'object',
    properties: components.reduce((acc, component) => {
      acc[component.id] = {
        ...component.configData.config,
        'x-component-props': {
          ...component.configData.config['x-component-props'],
          style: component.style,
        },
      };
      return acc;
    }, {}),
  };
});
</script>

<style lang="less" scoped>
.preview-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0f2f5;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.preview-toolbar {
  height: 48px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.preview-content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  justify-content: center;
}

.preview-container {
  background-color: #fff;
  min-height: calc(100vh - 96px);
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: width 0.3s ease;
}
</style> 